<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- 强制不需要浏览器缓存 -->
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Cache-control" content="no-cache">
  <meta http-equiv="Cache" content="no-cache">

  <meta name="description" content="metaCSS架构, 用于快速开发网页样式，只需要在元素的类上加上相应的类名即可">
  <meta name="Keywords" content="css, css架构, metacss, metaCSS架构, metaCSS">
  <title>metaCSS</title>
</head>

<body>
  <div class="layout">
    <div id="aside"></div>
    <main class="main">
      <header class="func-title">
        <p class="text-white tc fz-24 fwl">
          metaCSS架构
        </p>
      </header>
      <div class="meta-demo base-demo mb-50" id="base">
        <h3 class="text-white">基本使用</h3>
        <p class="text-white">在元素的class属性中加入相应的类名进行自由组合，即可快速实现效果，如以下要改变的背景颜色、块级、距离、字体大小为例子：</p>
        <code class="mt-20 mb-20">
  &lt;div class="bg-red dib mr-10 fz-12"&gt;今&lt;/div&gt;
  &lt;div class="bg-orange dib mr-20 fz-14"&gt;晚&lt;/div&gt;
  &lt;div class="bg-yellow dib mr-30 fz-16"&gt;打&lt;/div&gt;
  &lt;div class="bg-olive dib mr-40 fz-18"&gt;老&lt;/div&gt;
  &lt;div class="bg-green dib mr-50 fz-20"&gt;虎&lt;/div&gt;
  &lt;div class="bg-cyan dib mr-60 fz-24"&gt;。&lt;/div&gt;
        </code>
        <p class="">呈现效果：</p>
        <div class="fz-0">
          <div class="bg-red dib mr-10 fz-12">今</div>
          <div class="bg-orange dib mr-20 fz-14">晚</div>
          <div class="bg-yellow dib mr-30 fz-16">打</div>
          <div class="bg-olive dib mr-40 fz-18">老</div>
          <div class="bg-green dib mr-50 fz-20">虎</div>
          <div class="bg-cyan dib mr-60 fz-24">。</div>
        </div>
      </div>
      <h3>开始使用 -- 快速构建你的应用吧！</h3>
      <input type="text" class="h-0 p-0 bn" id="copyBox">
      <div id="document">
    </main>
    <footer>
      <p class="tc fwl fz-12 mt-50 mb-30 white">*声明： 开源项目，系交流学习使用，如有巧合纯属雷同。</p>
    </footer>
  </div>
</body>
</html>
<script type="text/javascript">
    // 点击复制功能
    function copyText(e) {
      let target = Event.srcElement || e.target
      let text = target.innerText;
      var input = document.getElementById("copyBox");
      input.value = text.trim();
      input.select();
      document.execCommand("copy");
    }
    /**注意事项：
     * 1.模板引擎后面的兄弟元素都不会被渲染，所以要用一个dom单独包裹
     * 2.
    */
</script>
